<!--
 * @Author: wangming
 * @Date: 2022-02-10 16:12:57
 * @LastEditors: wangming
 * @LastEditTime: 2022-03-02 11:09:52
 * @FilePath: /hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/rightModel/components/hmHook/index.vue
 * @Description:组件钩子
-->
<template>
  <div v-if="!!hooklist">
    <div class="mr10 mb5 g3">组件钩子</div>
    <div
      class="ks-row-middle mt5 mb10"
      v-for="(i, index) in hooklist"
      :key="index"
    >
      <div class="ks-row-middle g6 poi codebg ks-col" @click="editJsx(i)">
        <el-tag size="mini">
          <span class="button-title-tag">{{ i.label }}</span>
        </el-tag>

        <div class="g9 f12 ks-col tr">
          {{
            value.__config[i.value]
              ? "export default function..."
              : "（空）点击添加钩子函数"
          }}
        </div>
      </div>
      <el-tooltip effect="dark" :content="i.desc" placement="top">
        <i class="el-icon-question ml10 f16"></i>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import basicmixins from "../basicmixins";
import hookconfig from "./hook.config.js";
import CustomFnModal from "../customFnModal";
export default {
  mixins: [basicmixins],
  computed: {
    hooklist() {
      return hookconfig[this.value.tagName];
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    editJsx(i) {
      CustomFnModal.init({
        title: i.label,
        content: this.value.__config[i.value] || i.template,
        onConfirm: (data) => {
          this.$set(this.value.__config, i.value, data);
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.codebg {
  border: 1px solid #f1f1f1;
  padding: 5px 10px;
  &:hover {
    background-color: #f3f9ff;
  }
}
</style>
